<template>
  <div ref="chart" style="width: 100%; height: 80%;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { fetchData } from '../Api/api.js';

export default {
  data() {
    return {
      phoneData: [], // 用于存储后端返回的数据
    };
  },
  async mounted() {
    // 从后端获取数据
    const data = await fetchData('gettwelve');
    this.phoneData = data;

    // 初始化图表
    this.initChart();
  },
  methods: {
    initChart() {
      // 初始化 ECharts 实例
      this.chart = echarts.init(this.$refs.chart);

      // 准备数据
      const phoneTypes = [...new Set(this.phoneData.map(item => item.senderPhonetype))]; // 提取所有手机型号
      const maleData = phoneTypes.map(type =>
          this.phoneData.find(item => item.senderPhonetype === type && item.senderGender === '男')?.msgCnt || 0
      ); // 男性数据
      const femaleData = phoneTypes.map(type =>
          this.phoneData.find(item => item.senderPhonetype === type && item.senderGender === '女')?.msgCnt || 0
      ); // 女性数据

      // 配置项
      const option = {
        title: {
          text: '男女使用手机型号数量对比',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ['男', '女'],
        },
        xAxis: {
          type: 'category',
          data: phoneTypes, // 手机型号
          axisLabel: {
            interval: 0, // 强制显示所有标签
            rotate: 30, // 旋转角度，避免标签重叠
            color:'#000',
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#000', // y轴标签文字颜色改为黑色
          },
        },
        series: [
          {
            name: '男',
            type: 'bar',
            data: maleData, // 男性数据
            itemStyle: {
              color: '#5470C6', // 自定义颜色
            },
          },
          {
            name: '女',
            type: 'bar',
            data: femaleData, // 女性数据
            itemStyle: {
              color: '#91CC75', // 自定义颜色
            },
          },
        ],
      };

      // 设置图表配置项
      this.chart.setOption(option);
    },
  },
};
</script>